<template>
  <BasicTable @register="registerTable" :rowSelection="rowSelection">
    <template #tableTitle>
      <a-button
        type="primary"
        v-auth="'role:add'"
        preIcon="ant-design:plus-outlined"
        @click="handleCreate"
      >
        新增</a-button
      >
      <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">
        导出</a-button
      >
      <j-upload-button
        type="primary"
        preIcon="ant-design:import-outlined"
        @click="onImportXls"
        >导入</j-upload-button
      > -->
      <a-button
        :disabled="selectedRowKeys.length < 1"
        type="danger"
        v-auth="'user:batchdelete'"
        preIcon="ant-design:delete-outlined"
        @click="batchHandleDelete"
      >
        删除</a-button
      >
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="getTableAction(record)"
        :dropDownActions="getDropDownAction(record)"
      />
    </template>
  </BasicTable>
  <!--角色用户表格-->
  <RoleUserTable @register="roleUserDrawer" />
  <!--编辑抽屉-->
  <RoleDrawer
    @register="registerDrawer"
    @success="successreload"
    :showFooter="showFooter"
  />

  <RoleDesc @register="registerDesc"></RoleDesc>
  <!--角色菜单授权抽屉-->
  <RolePermissionDrawer @register="rolePermissionDrawer" />
  <!--角色首页配置-->
  <RoleIndexModal @register="registerIndexModal" />
</template>
<script lang="ts" name="system-role" setup>
import { ref } from "vue";
import { BasicTable, TableAction } from "/@/components/Table";
import { useDrawer } from "/@/components/Drawer";
import { useModal } from "/@/components/Modal";
import RoleDrawer from "./components/RoleDrawer.vue";
import RoleDesc from "./components/RoleDesc.vue";
import RolePermissionDrawer from "./components/RolePermissionDrawer.vue";
import RoleIndexModal from "./components/RoleIndexModal.vue";
import RoleUserTable from "./components/RoleUserTable.vue";
import { useMessage } from "/@/hooks/web/useMessage";
import { columns, searchFormSchema } from "./role.data";
import {
  list,
  deleteRole,
  batchDeleteRole,
  getExportUrl,
  getImportUrl,
} from "./role.api";
import { useListPage } from "/@/hooks/system/useListPage";
const showFooter = ref(true);
const [roleUserDrawer, { openDrawer: openRoleUserDrawer }] = useDrawer();
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerModal, { openModal }] = useModal();
const [registerIndexModal, { openModal: openIndexModal }] = useModal();
const [rolePermissionDrawer, { openDrawer: openRolePermissionDrawer }] = useDrawer();
const [registerDesc, { openDrawer: openRoleDesc }] = useDrawer();
const { createConfirm: confirm } = useMessage();
// 列表页面公共参数、方法
const { prefixCls, tableContext, onImportXls, onExportXls } = useListPage({
  designScope: "role-template",
  tableProps: {
    title: "系统角色列表",
    api: list,
    columns: columns,
    showIndexColumn: true,
    formConfig: {
      schemas: searchFormSchema,
      baseColProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
      actionColOptions: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6, xxl: 4 },
    },
    actionColumn: {
      width: 70,
    },
    //自定义默认排序
    defSort: {
      column: "id",
      order: "desc",
    },
  },
  exportConfig: {
    name: "角色列表",
    url: getExportUrl,
  },
  importConfig: {
    url: getImportUrl,
  },
});
const [
  registerTable,
  { reload, setSelectedRowKeys },
  { rowSelection, selectedRowKeys },
] = tableContext;

/**
 * 新增
 */
function handleCreate() {
  showFooter.value = true;
  openDrawer(true, {
    isUpdate: false,
  });
}
/**
 * 编辑
 */
function handleEdit(record: Recordable) {
  showFooter.value = true;
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}
/**
 * 详情
 */
function handleDetail(record) {
  showFooter.value = false;
  openRoleDesc(true, {
    record,
    isUpdate: true,
  });
}
function successreload() {
  reload();
  setSelectedRowKeys([]);
}
/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteRole(record.id, reload);
  setSelectedRowKeys([]);
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
  confirm({
    title: "注意",
    content: `确定要删除这些数据吗？删除后不可还原`,
    iconType: "warning",
    onOk: async () => {
      await deleteRole(selectedRowKeys.value, reload);
      setSelectedRowKeys([]);
      selectedRowKeys.value = [];
    },
  });
}
/**
 * 角色授权弹窗
 */
function handlePerssion(record) {
  openRolePermissionDrawer(true, { roleId: record.id });
}

/**
 * 首页配置弹窗
 */
function handleIndexConfig(roleCode) {
  openIndexModal(true, { roleCode });
}
/**
 * 角色用户
 */
function handleUser(record) {
  //onSelectChange(selectedRowKeys)
  openRoleUserDrawer(true, record);
}
/**
 * 操作栏
 */
function getTableAction(record) {
  return [
    // {
    //   label: "用户",
    //   onClick: handleUser.bind(null, record),
    //   auth: "role:user",
    // },
    {
      label: "授权",
      auth: "role:auth",
      onClick: handlePerssion.bind(null, record),
    },
  ];
}
/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
  return [
    {
      label: "编辑",
      onClick: handleEdit.bind(null, record),
      auth: "role:edit",
    },

    {
      label: "删除",
      auth: "role:delete",
      popConfirm: {
        title: "是否确认删除",
        confirm: handleDelete.bind(null, record),
      },
    }
  ];
}
</script>

<style lang="scss">
.ant-checkbox-wrapper {
  width: 30%;
  text-align: center;
  span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
